import React, { useState, useRef, useEffect } from 'react';
import { EdrmsUseReportStyled } from './style';

import * as echarts from 'echarts/core';
import { GetEdrmsBorrowReport } from '@/services';
import { CommonArrType } from '@/services/types';
import { getFontSize } from '@/utils/tools/common';
import useEchartsResize from '@/utils/hooks/useEchartsResize';
import { useSelector } from 'react-redux';
type EdrmsUseReportType = {
  // 利用类型, 利用次数，利用人次
  reportType: 'use-time' | 'person-time';
};
const EdrmsUseReport: React.FC<EdrmsUseReportType> = (props) => {
//   const chartRef = useRef(null);

  const [userReport, setUserReport] = useState<CommonArrType[]>();
  const [type, setType] = useState<number>(0);
  const [tittle, setTitle] = useState<string>(`切换为${type == 0 ? '月' : '年'}份展示`);
  const { reportType } = props;

  const fondName = useSelector((state: any) => state.mutifonds.fondName);

  // setType(0);
  function getUseReport(type: any) {
    GetEdrmsBorrowReport(type).then((res: any) => {
      res = res || [];
      // res.unshift({
      //     "sort": 0,
      //     "name": "0",
      //     "number": 0,
      //     "perCentNumber": 0
      // });
      setUserReport(res);
    });
  }

  useEffect(() => {
    getUseReport(0);
  }, [fondName]);
  const choseType = (type: any) => {
    setType(type);
    getUseReport(type);
  };

  let option = {
    // title: {
    //     text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: getFontSize(14), // 设置字体大小为12像素
      },
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#5897C5',
          width: 1,
          type: 'solid',
        },
      },
      boundaryGap: true,
      axisLabel: {
        color: '#5897C5',
        fontSize: getFontSize(14),
      },
      //   月份或年份
      data: userReport?.map((item) => item.name),
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      name: reportType == 'use-time' ? '件数' : '人次',
      nameTextStyle: {
        color: '#EEE',
        fontSize: getFontSize(12),
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#5897C5',
          width: 1,
          type: 'solid',
        },
      },
      axisLabel: {
        fontSize: getFontSize(14),
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#2D4873',
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '借阅',
        type: reportType == 'use-time' ? 'line' : 'bar',
        // smooth: true,
        symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
        symbolSize: 5, //小圆点的大小
        lineStyle: {
          // 阴影部分
          color: 'rgba(91,241,246,0.2)',
        },
        // stack: 'Total',
        data: userReport?.map((item) => item.number),
        itemStyle: {
           color: '#06bce1' // 1
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(0,224,219,0)', // 0% 处的颜色
              },
              {
                offset: 0,
                color: 'rgba(91,241,246,0.8)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };

  const chartRef = useEchartsResize(option, [userReport, type])
//   useEffect(() => {
//     let chart: any = null;
//     if (chartRef.current) {
//       // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
//       chart = echarts.init(chartRef.current);
//       // 设置图表实例的配置项和数据
//       option && chart.setOption(option);
//     }

//     const handleResize = () => {
//       if (chart) {
//         chart.resize();
//       }
//     };

//     // window.addEventListener('resize', handleResize);
//     return () => {
//       //  销毁实例。实例销毁后无法再被使用
//       chart && chart.dispose();
//     //   window.removeEventListener('resize', handleResize);
//     };
//   }, [userReport, type]);
  return (
    <EdrmsUseReportStyled>
      <div>
        <div className='map-box'>
          <div ref={chartRef} style={{ width: '100%', height: reportType == 'use-time' ? '85%' : '108%' }}></div>
          <div className='map-box-tool'>
            <div
              className={type == 1 ? 'tool-name active' : ' tool-name '}
              onClick={() => {
                choseType(1);
              }}
            >
              月
            </div>
            <div
              className={type == 0 ? 'tool-name active' : ' tool-name '}
              onClick={() => {
                choseType(0);
              }}
            >
              年
            </div>
          </div>
        </div>
      </div>
    </EdrmsUseReportStyled>
  );
};

export default EdrmsUseReport;
